<template>
  <div>
    <h2>Hello World</h2>

    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>

import { ref,  onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  setup() {
    // 在 setup 选项中,写的代码就是组合式代码,该代码环境中是没有 this 指向
    const count = ref(1)
    const increment = () => {
      console.log('increment', count)
      count.value++
    }

    // 没有 onBeforeCreate 与 onCreated 因为 setup 就可以表示他们

    onBeforeMount(() => {
      console.log('挂载之前')
    })

    onMounted(() => {
      console.log('挂载完成')
    })

    onBeforeUpdate(() => {
      console.log('更新之前')
    })

    onUpdated(() => {
      console.log('更新完成')
    })

    onBeforeUnmount(() => {
      console.log('卸载之前')
    })

    onUnmounted(() => {
      console.log('卸载完成')
    })

    return {
      count: count,
      increment: increment
    }
  }
}
</script>